{{ hiddenInput(name, '') }}

<div class="matrix matrix-field" id="{{ id }}">
    <div class="blocks">
        {% set totalNewBlocks = 0 %}
        {% for block in blocks %}
            {% set blockId = block.id %}
            {% set blockIsNew = blockId is empty %}
            {% if blockIsNew %}
                {% set totalNewBlocks = totalNewBlocks + 1 %}
                {% set blockId = 'new'~totalNewBlocks %}
            {% endif %}
            {% set baseInputName = "#{name}[blocks][#{blockId}]" %}
            {% set blockAttributes = {
                class: [
                    'matrixblock',
                    not block.enabled ? 'disabled',
                    static ? 'static',
                ]|filter,
                data: {
                    id: blockId,
                    type: block.getType().handle,
                    collapsed: block.collapsed,
                },
            } %}

            <div {{ attr(blockAttributes) }}>
                {% if not static %}
                    {{ hiddenInput("#{name}[sortOrder][]", blockId) }}
                    {# only register a delta name for this black if it's not new #}
                    {% if not blockIsNew %}
                        {% do view.registerDeltaName(baseInputName) %}
                    {% endif %}
                    {{ hiddenInput("#{baseInputName}[type]", block.getType().handle) }}
                    {{ hiddenInput("#{baseInputName}[enabled]", block.enabled ? '1' : '') }}
                    <div class="titlebar">
                        <div class="blocktype{% if block.hasErrors() %} error{% endif %}">
                            {{ block.getType().name|t('site') }}
                            {% if block.hasErrors() %}<span data-icon="alert" aria-label="{{ 'Error'|t('app') }}"></span>{% endif %}
                        </div>
                        <div class="preview"></div>
                    </div>
                    <div class="checkbox" title="{{ 'Select'|t('app') }}" aria-label="{{ 'Select'|t('app') }}"></div>
                    <div class="actions">
                        <div class="status off" title="{{ 'Disabled'|t('app') }}" aria-label="{{ 'Disabled'|t('app') }}"></div>
                        <a class="settings icon menubtn" title="{{ 'Actions'|t('app') }}" aria-label="{{ 'Actions'|t('app') }}" role="button"></a>
                        <div class="menu">
                            <ul class="padded">
                                <li><a data-icon="collapse" data-action="collapse">{{ "Collapse"|t('app') }}</a></li>
                                <li class="hidden"><a data-icon="expand" data-action="expand">{{ "Expand"|t('app') }}</a></li>
                                <li{% if not block.enabled %} class="hidden"{% endif %}><a data-icon="disabled" data-action="disable">{{ "Disable"|t('app') }}</a></li>
                                <li{% if block.enabled %} class="hidden"{% endif %}><a data-icon="enabled" data-action="enable">{{ "Enable"|t('app') }}</a></li>
                                <li><a data-icon="uarr" data-action="moveUp">{{ 'Move up'|t('app') }}</a></li>
                                <li><a data-icon="darr" data-action="moveDown">{{ 'Move down'|t('app') }}</a></li>
                            </ul>
                            {% if not staticBlocks %}
                                <hr class="padded">
                                <ul class="padded">
                                    <li><a class="error" data-icon="remove" data-action="delete">{{ "Delete"|t('app') }}</a></li>
                                </ul>
                                <hr class="padded">
                                <ul class="padded">
                                    {% for blockType in blockTypes %}
                                        <li><a data-icon="plus" data-action="add" data-type="{{ blockType.handle }}">{{ "Add {type} above"|t('app', { type: blockType.name|t('site') }) }}</a></li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        </div>
                        <a class="move icon" title="{{ 'Reorder'|t('app') }}" aria-label="{{ 'Reorder'|t('app') }}" role="button"></a>
                    </div>
                {% endif %}
                <div class="fields">
                    {% namespace baseInputName %}
                        {{ block.getFieldLayout().createForm(block, static).render()|raw }}
                    {% endnamespace %}
                </div>
            </div>
        {% endfor %}
    </div>
    {% if not static and not staticBlocks %}
        <div class="buttons">
            <div class="btngroup">
                {% for blockType in blockTypes %}
                    <button type="button" class="btn dashed{% if loop.first %} add icon{% endif %}" data-type="{{ blockType.handle }}">{{ blockType.name|t('site') }}</button>
                {% endfor %}
            </div>

            <button type="button" class="btn dashed add icon menubtn hidden">{{ "Add a block"|t('app') }}</button>
            <div class="menu">
                <ul>
                    {% for blockType in blockTypes %}
                        <li><a data-type="{{ blockType.handle }}">{{ blockType.name|t('site') }}</a></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    {% endif %}
</div>
